function template(state, props) {
  let data = []
  let data2 = []
  for(let i = 0; i< 8; i++) {
    if (i < 4) {
      data.push({
        title: 'ss-col-6 / 25%',
        itemStyle: i % 2 === 0 ? {
          background: 'rgba(18,153,253, .9)',
          color: '#fff',
          height: '60px'
        } : {},
      })
    }
    data2.push({
      title: {
        title: 'ss-col-6 / 25%',
        itemClass: 'bg-color-primary color-fff flex-row justify-center al-item-center',
        itemStyle: { height: '60px'}
      }
    })
  }
  const listInst = ui_list({
    data: [{title: 'ss-col-24 / 100%', itemStyle: {height: '60px'}}],
    listClass: 'color-fff',
    itemClass: 'ss-col-24 flex-row justify-center al-item-center ss-row bg-color-primary'
  })
  const listInst2 = ui_list({
    data: data,
    listClass: 'ss-row',
    itemClass: 'ss-col-6 flex-row justify-center al-item-center',
  })
  const listInst3 = ui_list({
    data: [{title: 'ss-col-4', itemClass: 'ss-col-4', itemStyle: {height: '60px'},}, {title: 'ss-col-18 ss-col-offset-2', itemClass: 'ss-col-18 ss-col-offset-2', itemStyle: {height: '60px'}}],
    listClass: 'ss-row',
    itemClass: 'bg-color-primary color-fff flex-row justify-center al-item-center'
  })
  const listInst4 = ui_list({
    data: data2,
    listClass: 'ss-row',
    itemClass: 'ss-col-6',
  })

  return (
    <>
      <View className="pages-title-lg">栅格</View>
      {listInst.render()}
      {listInst2.render()}
      {listInst3.render()}
      {listInst4.render()}
    </>
  )
}

export default function(Pager) {
  return Pager({
    template,
    data: {
    },
    onReady(){
    }
  })
}